<template>
    <div class="contain">
        <div class="title11">悦来电后台管理</div>
        <div class="title_english">Yue Calling Management Background</div>
       <div v-if="is_forget == false" class="login_block">
            <div class="title">
                <div class="title_left">欢迎登录</div>
                <div class="line"></div>
                <div class="title_right">悦来电管理后台</div>
            </div>
            <el-form :model="userInfo"  status-icon :rules="rules" width="300.02px" ref="ruleForm" class="demo-ruleForm">
                <el-form-item prop="username">
                    <div class="form_item">
                        <img src="@/images/user.png">
                        <el-input type="text" placeholder="请输入您的用户名" maxlength="20" v-model="userInfo.username" autocomplete="off"></el-input>
                    </div>
                </el-form-item>
                <el-form-item prop="password">
                    <div class="form_item">
                        <img src="@/images/password.png">
                        <el-input type="password" show-password placeholder="请输入您的密码" maxlength="20" v-model="userInfo.password" autocomplete="off"></el-input>
                    </div>
                </el-form-item>
                <el-form-item prop="code">
                    <div class="form_item">
                        <img class="yanzheng" src="@/images/safe.png">
                        <el-input style="width: 180px; transform: translate(0,-15px);" placeholder="请输入验证码" type="text" maxlength="4" v-model="userInfo.code" autocomplete="off"></el-input>
                        <span class="gun">
                            <img v-if="refresh == true" class="yzmImg" @click="refreshImage" :src="imgUrl">
                            <img v-else class="yzmImg" @click="refreshImage" :src="imgUrl">
                        </span>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button class="el-buttons" type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    <div class="forget" @click="forgetPassword">忘记密码?</div>
                </el-form-item>
            </el-form>
       </div>
       <div v-if="is_forget==true" class="login_block find">
            <div class="title two">
               <div class="backIcon" @click="noForgetPassword"><img src="@/images/home/backForget.png" alt="返回"></div>
               <div class="forgetTitle">找回密码</div>
            </div>
            <el-form :model="findPassword" status-icon :rules="rulesForget" width="300px" ref="ruleForm2" class="demo-ruleForm">
                <el-form-item prop="tel">
                    <div class="form_item">
                        <el-input type="text" placeholder="手机号" v-model="findPassword.tel" autocomplete="off"></el-input>
                    </div>
                </el-form-item>
                <el-form-item prop="yzm">
                    <div class="form_item getYzm">
                        <el-input type="yzm" placeholder="验证码" v-model="findPassword.yzm" autocomplete="off"></el-input>
                    </div>
                    <div class="getYzmblock">获取验证码</div>
                </el-form-item>
                <el-form-item prop="passwordF">
                    <div class="form_item">
                        <el-input type="password" show-password placeholder="请输入新密码" v-model="findPassword.passwordF" autocomplete="off"></el-input>
                    </div>
                </el-form-item>
                <el-form-item prop="newPassword">
                    <div class="form_item">
                        <el-input type="password" show-password placeholder="请再次输入新密码" v-model="findPassword.newPassword" autocomplete="off"></el-input>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button class="el-buttons" style="background-color: #165BFF;" type="primary" @click="submitFormForget('ruleForm2')">确定</el-button>
                </el-form-item>
            </el-form>
       </div>
    </div>
</template>

<script>
import login from '../api/jur.js'
import { setToken } from '../utils/token.js'
    export default {
        data() {
            return {
                refresh:true,
                imgUrl:'',
                is_forget:false,
                userInfo:{
                    username:'',
                    password:'',
                    code:'',
                    uniqid:''
                },
                findPassword:{
                    tel:'',
                    yzm:'',
                    passwordF:'',
                    newPassword:''
                },
                rules: {
                    username: [
                        { required: true, message: '请输入正确的用户名', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入您的密码', trigger: 'change' },
                        { min: 5, max: 20, message: '长度在 6 到 20 个字符', trigger: 'change' }
                    ],
                    code: [
                        { required: true, message: '请输入正确的验证码', trigger: 'change' },
                        { min: 4, max: 4, message: '长度为4个字符', trigger: 'change' }
                    ],
                },
                rulesForget: {
                    tel: [
                        { required: true, message: '请输入正确的手机号', trigger: 'change' }
                    ],
                    yzm: [
                        { required: true, message: '验证码不正确', trigger: 'change' }
                    ],
                    passwordF: [
                        { required: true, message: '请输入您的密码', trigger: 'change' }
                    ],
                    newPassword: [
                        { required: true, message: '两次密码输入不一致', trigger: 'blur' },
                        { min: 10, max: 20, message: '长度在 10 到 20 个字符', trigger: 'blur' }
                    ],
                },
            }
        },
        mounted() {
            this.getVerifySrc()
        },
        methods: {
            getVerifySrc(){
                login.verify().then(res=>{
                    console.log('登录',res)
                    this.imgUrl = res.data.data.image
                    this.userInfo.uniqid = res.data.data.uniqid
                })
            },
            forgetPassword(){
                this.is_forget = true
                this.$refs['ruleForm'].resetFields()
            },
            noForgetPassword(){
                this.is_forget = false
                this.$refs['ruleForm2'].resetFields()
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    login.login(this.userInfo).then(res=>{
                    console.log('登录成功',res)
                    if(res.data.code == 200){
                        this.$message.success("登录成功")
                        setToken('token',res.data.data)
                        setTimeout(()=>{
                            this.$router.push("/layout")
                        },500)
                    } else if(res.data.code == 401){
                        this.$message.warning(`${res.data.msg}`)
                    }
                })
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            submitFormForget(formName) {
                // console.log('666')
                // this.$refs[formName].validate((valid) => {
                // if (valid) {
                //     alert('submit!');
                //     login.login(this.userInfo).then(res=>{
                //     console.log('登录成功',res)
                // })
                //     // this.$router.push("/layout")
                // } else {
                //     console.log('error submit!!');
                //     return false;
                // }
                // });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            refreshImage(){
                this.getVerifySrc()
            }
        },
    }
</script>

<style lang="less" scoped>

.yanzheng{
    transform: translate(0,-10px) !important;
}
.gun{
    display: inline-block;
    border-left: 1px solid #D5D7E3;
    padding-left: 15px;
}
.title11{
    position: fixed;
    left: 100.03px;
    top: 80.01px;
    font-size: 30.03px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 30.03px;
}
.title_english{
    position: fixed;
    left: 100.03px;
    top: 119.98px;
    font-size: 20.02px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 24.01px;
}
.contain{
    width: 100vw;
    height: 100vh;
    background: url('@/images/111\ 2@2x.png');
    background-size: 100%;
    position: relative;
}
.login_block{
    overflow: hidden;
    position: absolute;
    top: 241.01px;
    right: 101.01px;
    width: 416.01px;
    height: 528.01px;
    background: #FFFFFF;
    box-shadow: 0px -0.98px 35px 2.03px rgba(49,132,255,0.13);
    border-radius: 7.98px 7.98px 7.98px 7.98px;
    opacity: 1;
}

element.style {
    margin-left: 0px;
}
.el-form-item{
    margin-bottom: 24.01px !important;
}
.login_block>.title{
    margin: 63.98px auto 0;
    font-size: 24.01px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 24.01px;
    width: 240.03px;
    height: 24.01px;
}
.title>div{
    display: inline-block;
    vertical-align: middle;
}
.line{
    width: 0px;
    height: 17.01px;
    margin-left: 7.98px;
    margin-right: 7.98px;
    opacity: 1;
    border: .98px solid #D5D7E3;
}
.title>.title_right{
    font-size: 17.99px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 24.01px;
}
.el-form {
    margin-top: 48.02px;
}
.form_item{
    margin: 0px auto 0px;
    width: 336px;
    height: 44.03px;
    background: #F6F7FB;
    border-radius: 3.99px 3.99px 3.99px 3.99px;
    opacity: 1;
}
.el-input{
    transform: translate(0,-4.97px);
    width: 259.98px;
    height: 28px;
    font-size: 14px;
}
.form_item>img{
    width: 20.02px;
    height: 20.02px;
    margin-top: 11.97px;
    margin-left: 16.03px;
}

.el-input /deep/ .el-input__inner {
    border: 0;
    outline: none;
    background-color: rgba(255, 255, 255, 0);
}
.el-buttons{
    background: #165BFF;
    margin-left: 39.97px;
    width: 336px;
    height: 44.03px;
    border: 0;
    border-radius: 3.99px 3.99px 3.99px 3.99px;
    opacity: 1;
    font-size: 14px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
}
/deep/ .el-form-item__error {
    left: 39.97px !important;
}
.yzmImg{
    float: right;
    height: 42px !important;
    margin-top: 1px;
    margin-right: 2px;
    border-radius: 0px 2px 2px 0;
    cursor: pointer;
}
.forget{
    margin-top: 16.03px;
    margin-right: 39.97px;
    transform: translate(315px,0px);
    height: 14px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #165BFF;
    line-height: 14px;
    cursor: pointer;
}
.two{
    width: 100% !important;
    height: 24.01px;
    line-height: 24.01px;
}
.backIcon{
    margin-left: 39.97px;
    margin-right: 95.97px;
    float: left;
    cursor: pointer;
}
.backIcon img{
    width: 24.01px;
    height: 24.01px;
}
.forgetTitle{
    float: left;
    font-size: 24.01px !important;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 24.01px;
}
.getYzm{
    margin-left: 39.97px;
    width: 217.98px;
    display: inline-block;
}
.getYzm .el-input{
    width: 199.99px;
    height: 39.97px;
    transform: translate(4.97px,4.97px);
}
.getYzmblock{
    display: inline-block;
    width: 101.99px;
    text-align: center;
    height: 44.03px;
    background: #F6F7FB;
    border-radius: 3.99px 3.99px 3.99px 3.99px;
    opacity: 1;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44.03px;
    margin-left: 16.03px;
    color: #165BFF;
    cursor: pointer;
}
.find .el-input{
    width: 90%;
    height: 39.97px;
    transform: translate(0,0px);
}
.el-range-input{
    background: #f0f1f6;
    font-size: 11.97px !important;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
@media screen and (max-width: 1200px) { /*当屏幕尺寸小于599.97px时，应用下面的CSS样式*/
  /*你的css代码*/
  .login_block{
    margin-left: 50%;
    margin-top: 50%;
    transform: translate(-50%,-50%)
}
}
</style>